<template>
  <div class="index">
    <!-- 布局 -->
    <el-container>
      <el-aside width="250px">
        <div v-show="!isCollapse" class="title">嗨购后台管理系统</div>
        <!-- router 属性 开启路由模式 -->
        <!-- collapse 属性 控制菜单是否折叠 -->
        <!-- background-color 属性 背景色  -->
        <!-- text-color 属性 文本颜色  -->
        <el-menu
          @select="handleSelect"
          :collapse="isCollapse"
          router
          background-color="#111"
          text-color="white"
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item index="/index/home">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Picture /></el-icon>
              <span>轮播图管理</span>
            </template>
            <el-menu-item index="/index/swiper">
              <el-icon><icon-menu /></el-icon>
            <span>轮播图列表</span>
          </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><User /></el-icon>
              <span>账号管理</span>
            </template>
            <el-menu-item index="/index/admin">
              <el-icon><icon-menu /></el-icon>
            <span>管理员列表</span>
          </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><Goods /></el-icon>
              <span>产品管理</span>
            </template>
            <el-menu-item index="/index/pro">
              <el-icon><icon-menu /></el-icon>
              <span>产品列表</span>
            </el-menu-item>
            <el-menu-item index="/index/seckill">
              <el-icon><icon-menu /></el-icon>
              <span>秒杀列表</span>
            </el-menu-item>
            <el-menu-item index="/index/recommend">
              <el-icon><icon-menu /></el-icon>
              <span>推荐列表</span>
            </el-menu-item>
            <el-menu-item index="/index/filter">
              <el-icon><icon-menu /></el-icon>
              <span>筛选列表</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <!-- <el-icon><View /></el-icon> -->
              <el-icon><PieChart /></el-icon>
              <span>数据可视化</span>
            </template>
            <el-menu-item index="/index/echarts">
              <el-icon><icon-menu /></el-icon>
            <span>echarts使用</span>
          </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="6">
            <template #title>
              <el-icon><Edit /></el-icon>
              <span>编辑器</span>
            </template>
            <el-menu-item index="/index/edit">
              <el-icon><icon-menu /></el-icon>
            <span>编辑器使用</span>
          </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="7">
            <template #title>
              <el-icon><Grid /></el-icon>
              <span>excel管理</span>
            </template>
            <el-menu-item index="/index/excel">
              <el-icon><icon-menu /></el-icon>
            <span>excel使用</span>
          </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="8">
            <template #title>
              <el-icon><location /></el-icon>
              <span>地图管理</span>
            </template>
            <el-menu-item index="/index/map">
              <el-icon><icon-menu /></el-icon>
            <span>百度地图</span>
          </el-menu-item>
          </el-sub-menu>
          
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header">
          <div class="left">
            <el-icon v-if="!isCollapse" @click="handleCollapse"><Fold /></el-icon>
            <el-icon v-else @click="handleCollapse"><Expand /></el-icon>
          </div>
          <div class="right">
            <span>欢迎 : admin </span>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-icon><User /></el-icon>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="setting">设置</el-dropdown-item>
                  <el-dropdown-item command="exit">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <!-- 嵌套路由的渲染出口 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script setup>

import {ref} from 'vue'
import { useRouter } from 'vue-router'
import { useMenuStore } from '@/stores/menu'

var $router = useRouter()

var menuStore = useMenuStore();

var isCollapse = ref(false);

//处理侧边栏导航栏的展开和折叠
var handleCollapse = ()=>{
  isCollapse.value = !isCollapse.value;
}

//选择侧边栏导航 菜单项
var handleSelect = (index,indexPath)=>{
  
  //保存菜单索引(标识)到pinia
  menuStore.saveMenuData(indexPath);
}

//处理下拉菜单的命令
var handleCommand = (cmd)=>{
  if( cmd == 'exit' ){ //点了"退出"
    //删除登陆信息(token)

    //跳转到登录页
    $router.push('/login');
  }
}

</script>

<style scoped lang='scss'>
.index{
  .title{
    padding: 20px;
    text-align: center;
    font-size: 20px;
    color: white;
  }
  .el-aside{
    width: auto !important;
    background-color: #111;
  }
  .header{
    background-color: #111;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right{
      display: flex;
      align-items: center;
      .el-dropdown{
        margin-left: 20px;
      }
      .el-icon{
        color: white;
      }
    }
  }
}
</style>